<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Add Your favicon here -->
    <link rel="icon" href="${ctx}/resource/v2/img/favicon.ico">

    <title>西安三星 SW 综合系统 Samsung XIAN SW Comprehensive System</title>

    <!-- Bootstrap core CSS -->
    <link href="${ctx}/resource/v2/css/bootstrap.min.css" rel="stylesheet">

    <!-- Animation CSS -->
    <link href="${ctx}/resource/v2/css/animate.min.css" rel="stylesheet">

    <link href="${ctx}/resource/v2/css/font-awesome.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="${ctx}/resource/v2/js/html5shiv.min.js"></script>
    <script src="${ctx}/resource/v2/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="${ctx}/resource/v2/css/style.css" rel="stylesheet">
    <link href="${ctx}/resource/v2/css/cfe.css" rel="stylesheet">
   
</head>
<body id="page-top">
<div class="navbar-wrapper">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><i class="fa fa-bold ">-VLLT</i></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="page-scroll features-icon-smaller" href="#page-top">首页</a></li>
                        <li><a class="page-scroll features-icon-smaller" href="#vote">投票</a></li>
                        <li><a class="page-scroll features-icon-smaller" href="#lottery">抽奖</a></li>
                        <li><a class="page-scroll features-icon-smaller" href="#lots">抽签</a></li>
                        <li><a class="page-scroll features-icon-smaller" href="#timer">计时</a></li>
                        <li><a class="page-scroll features-icon-smaller" href="#contact">联系我们</a></li>
                       	<c:choose>
						   <c:when test="${!empty sessionScope.LOGINED_USER.uid}">
						   <li><a class="page-scroll features-icon-smaller" href="${ctx}/center/home/index.html" >
					   				<img class="login-img" alt="" src="${ctx}${sessionScope.LOGINED_USER.userImage}" />&nbsp;${sessionScope.LOGINED_USER.name}
								</a>
							</li>
							<li>
								<a class="features-icon-smaller" href="${ctx}/user/logout.do"><i class="fa fa-sign-out"></i>退出</a>
							</li> 
						   </c:when>
						   <c:otherwise>
						     <li><a class="features-icon-smaller" id="login"><i class="fa fa-sign-in"></i>登录</a></li>
						   </c:otherwise>
						</c:choose>
                    </ul>
                </div>
            </div>
        </nav> 
</div>
<div id="inSlider" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#inSlider" data-slide-to="0" class="active"></li>
        <li data-target="#inSlider" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="container">
                <div class="carousel-caption">
                    <h1>西安三星 SW 综合系统 <br/>
                        Samsung XIAN SW <br/>Comprehensive System<br/>
                    </h1>
                    <p>我们专注于提供各种细微服务：抽奖，投票，抽签，计时等等</p>
                </div>
                <div class="carousel-image wow zoomIn">
                    <img src="${ctx}/resource/v2/img/laptop.png" alt="laptop"/>
                </div>
            </div>
            <!-- Set background for slide in css -->
            <div class="header-back one"></div>

        </div>
        <div class="item">
            <div class="container">
                <div class="carousel-caption blank">
                    <h1>我们的应用非常的灵活和简单 <br/>操作便利，获取结果迅捷</h1>
                    <p>请相信我们的服务源于您对我们的信任</p>
                </div>
            </div>
            <!-- Set background for slide in css -->
            <div class="header-back two"></div>
        </div>
    </div>
    <a class="left carousel-control" href="#inSlider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#inSlider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!--投票功能模块开始-->
<section id="vote" class="container services">
    <div class="row text-center ">
        <div class="col-sm-3  wow fadeInLeft">
             <img src="${ctx}/resource/v2/img/vote1.jpg" alt="dashboard" class="img-responsive">
        </div>
        <div class="col-sm-3 wow fadeInUp">
            <img src="${ctx}/resource/v2/img/vote2.jpg" alt="dashboard" class="img-responsive">
        </div>
        <div class="col-sm-3 wow fadeInDown">
             <img src="${ctx}/resource/v2/img/vote3.jpg" alt="dashboard" class="img-responsive">
        </div>
        <div class="col-sm-3 wow fadeInRight">
            <img src="${ctx}/resource/v2/img/vote4.jpg" alt="dashboard" class="img-responsive">
        </div>
    </div>
</section>

<section  class="container features">
     
    <div class="row">
        <div class="navy-line"></div>
        <div id="create-vote" class="col-md-3 text-center wow fadeInLeft ">
                <h1><a class="btn btn-lg btn-primary" href="#vote" role="button">新建投票</a></h1>
                <p> 点击新建投票按钮可以新建新的投票</p>
        </div>
        <div class="col-lg-6 text-center wow rollIn">
            <h1>投票<br/> <span class="features-icon-small  "> 倾听评选声音,满足评选需求</span> </h1>
            <p>整合各类评选活动的资料和信息,集评选,资讯,榜单和排行于一体的综合性在线网络投票平台,<br/>给评选提供一个共同提高的交流平台。</p>
        </div>
        <div id="my-vote"  class="col-md-3 text-center wow fadeInRight">     
            <h1><a class="btn btn-lg btn-primary" href="${ctx}/center/vote/myCreate.html" role="button">我的投票</a></h1>
            <p> 点击我的投票可以查看自己曾经参与过的投票</p>
        </div>	
    </div>
    
    <div class="row features-block">
        <div class="col-lg-6 features-text wow fadeInLeft text-center">
            <table class="table table-responsive table-hover">
              	<thead>
					<tr>
              			<td colspan="5" class="text-center">
              			<i class="fa fa-rebel features-icon-small ">参与的投票</i>
              			</td>
              		</tr>
              	</thead> 
               	<tbody>
               		<tr class="success">
               			<td>编号</td>
               			<td>投票主题</td>
               			<td>投票范围</td>
               			<td>创建时间</td>
               		</tr>
               		<c:forEach items="${newList}" var="topic"  varStatus="status">
					<tr>
						<td>${status.index+1}</td>
               			<td>
							<a href="${ctx}/vote/router/route.html?topicId=${topic.tid}"  >
								<c:choose>  
								    <c:when test="${fn:length(topic.title) > 10}">${fn:substring(topic.title, 0, 10)}...</c:when>  
								   	<c:otherwise>${topic.title}</c:otherwise>  
								</c:choose>  
							</a>
						</td>
               			<td>${topic.scope==1?'仅会员可投':'所有人可投'}</td>
               			<td><fmt:formatDate value="${topic.createTime}" type="both"/> </td>
					</tr>
				</c:forEach>
               	</tbody>
			</table>
        </div>
        <div class="col-lg-6 features-text wow fadeInRight text-center">
            <table class="table table-responsive table-hover">
                 	<thead>
                 		<tr>
                 			<td colspan="5" class="text-center">
                 			<i class="fa fa-fire features-icon-small ">最热的投票</i>
                 			</td>
                 		</tr>
                 	</thead>
					<tbody>
						<tr class="info">
							<td>编号</td>
							<td>投票主题</td>
							<td>投票范围</td>
							<td>投票热度</td>
						</tr>
						
						<c:forEach items="${hotList}" var="hot"  varStatus="status">
						<tr>
							<td>${status.index+1}</td>
	               			<td>
								<a href="${ctx}/vote/router/route.html?topicId=${hot.tid}"  >
									<c:choose>  
									    <c:when test="${fn:length(hot.title) > 10}">  
									        ${fn:substring(hot.title, 0, 10)}...
									    </c:when>  
									   <c:otherwise>  
									   		${hot.title}
									    </c:otherwise>  
									</c:choose>  
								</a>
							</td>
	               			<td>${hot.scope==1?'仅会员可投':'所有人可投'}</td>
	               			<td>${hot.cnt} </td>
						</tr>
						</c:forEach>
						
					</tbody>
				</table>
        </div>
    </div>
</section>

<!--抽奖功能模块开始-->
<section id="lottery" class="gray-section team ">
    <div class="container">
        <div class="row m-b-lg">
            <div class="col-lg-12 text-center wow zoomIn">
                <div class="navy-line"></div>
                <h1>抽奖</h1>
                <p>把个人的SingleID存放在红包表里里，年会上系统随机摘取一个。悬念十足，气氛紧张。</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 wow fadeInLeft">
                <div class="team-member">
                    <img src="${ctx}/resource/v2/img/avatar4.jpg" class="img-responsive img-circle img-small" alt="">
                    <h4><span class="navy"><a id="create-lottery" href="#lottery" class="btn btn-lg btn-primary">新建抽奖</a></span></h4>
                    <p>点击新建抽奖按钮，新建一个抽奖活动</p>
                    <ul class="list-inline social-icon">
                        <li><a href="#"><i class="fa fa-qq"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weibo"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weixin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-8 wow fadeInRight">
                 <table class="table table-responsive table-hover text-center">
                 	<thead>
                 		<tr>
                 			<td colspan="5" class="text-center">
                 			<i class="fa fa-pagelines features-icon-small ">最新的抽奖</i>
                 			</td>
                 		</tr>
					</thead>
                 	
					<tbody>
						<tr class="danger">
							<td>编号</td>
							<td>抽奖主题</td>
							<td>抽奖方式</td>
							<td>新建时间</td>
							<td>截止时间</td>
						</tr>
						
						<c:forEach items="${lotteryList}" var="lottery"  varStatus="status">
						<tr>
							<td>${status.index+1}</td>
							<td>
								<a href="${ctx}/lottery/router/route.html?lid=${lottery.id}"  >
									<c:choose>  
									    <c:when test="${fn:length(lottery.title) > 10}">  
									        ${fn:substring(lottery.title, 0, 10)}...
									    </c:when>  
									   <c:otherwise>  
									         ${lottery.title}
									    </c:otherwise>  
									</c:choose>  
								</a>
							</td>
							<td>${lottery.type==1?'炫酷式抽奖':'简约式抽奖'}</td>
							<td><fmt:formatDate value="${lottery.createTime}" type="both"/></td>
							<td><fmt:formatDate value="${lottery.deadline}" type="both"/></td>
						</tr>
						</c:forEach>
						
					</tbody>
                 </table>
                
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center m-t-lg m-b-lg">
                <p> </p>
            </div>
        </div>
    </div>
</section>
 

<!--抽签功能模块开始-->
<section id="lots" class="navy-section testimonials">

    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center wow zoomIn">
                <i class="fa fa-group big-icon"></i>
                 <h1>抽签</h1>
                <div class="testimonials-text">
                    <i>抽签就是抓阄,先把几个签写好,再把它们一一折起来,打乱顺序,再由一个或几个人来抽。</i><br/>
                    <i>1、削竹为签，配以语句，于神前抽掣以占吉凶的迷信活动。 唐 宋居白 《幸蜀记》：“初，衍祷张恶子 庙，抽签得‘逆天者殃’四字。”</i><br/>
                    <i>2、拈阄。 清 姚之駰 《元明事类钞·官品门一》：“《万历注略》：孙丕扬为吏部，更定选法，亲自抽签，时人嘲铨部为签部。” 洪深 《包得行》第一幕：“每个过了十八岁还没有到四十五岁的男子，都有当兵的义务，谁先谁后凭抽签，谁先抽到谁该先去。”</i><br/>
                    <i>现代的抽签方式不再用木棍了，一般都用纸。</i>
                </div>
                <small>
                    <strong>2016.03.24 - CFE</strong>
                </small>
            </div>
        </div>
    </div>

</section>
<section class="features">
    <div class="container m-t-lg" >
         
        <div class="row">
            <div class="col-sm-4 wow fadeInLeft">
                <div class="team-member">
                    <img src="${ctx}/resource/v2/img/lots.jpg" class="img-responsive img-circle img-small" alt="">
                    <h4><span class="navy"><a id="create-lots" href="#lots" class="btn btn-lg btn-primary">新建抽签</a></span></h4>
                    <p>点击新建抽奖按钮，新建一个抽奖活动</p>
                    <ul class="list-inline social-icon">
                        <li><a href="#"><i class="fa fa-qq"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weibo"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weixin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-8 wow fadeInRight">
                 <table class="table table-responsive table-hover text-center">
                 	<thead>
                 		<tr>
                 			<td colspan="5" class="text-center">
                 			<i class="fa fa-pagelines features-icon-small ">最新的抽签</i>
                 			</td>
                 		</tr>
                 	</thead>
					<tbody>
						<tr class="info">
							<td>编号</td>
							<td>抽签主题</td>
							<td>抽签方式</td>
							<td>新建时间</td>
							<td>开始时间</td>
						</tr>
						
						<c:forEach items="${lotsList}" var="lots"  varStatus="status">
						<tr>
							<td>${status.index+1}</td>
							<td title="${lots.title}">
								<a href="${ctx}/lots/router/route.html?lid=${lots.id}"  >
									<c:choose>  
									    <c:when test="${fn:length(lots.title) > 10}">  
									        ${fn:substring(lots.title, 0, 10)}...
	 								    </c:when>  
									   <c:otherwise>  
											${lots.title}
									   </c:otherwise>  
									</c:choose>  
								</a>
							</td>
							<td>${lots.type==1?'抽奖式抽签':'分组式抽签'}</td>
							<td><fmt:formatDate value="${lots.createTime}" type="both"/></td>
							<td><fmt:formatDate value="${lots.startTime}" type="both"/></td>
						</tr>
						</c:forEach>
					</tbody>
				</table>
                
            </div>
        </div>
         
    </div>

</section>

<!--计时功能模块开始-->
<section id="timer" class="pricing">
    <div class="container">
        <div class="row m-b-lg">
            <div class="col-lg-12 text-center">
                <div class="navy-line"></div>
                <h1>计时</h1>
                <p>
                	计时器，是利用特定的原理来测量时间的装置。 
                </p>
            </div>
        </div>
        <div class="row">
		<div class="col-lg-6 wow zoomIn  text-center">
			<canvas id="myCanvas" width="400" height="350"></canvas>
			<h1><a class="btn btn-lg btn-primary m-l-n-lg " href="${ctx}/center/timer/stopwatch/simple.html" role="button">新建计时</a></h1>
		</div>

            <div class="col-lg-6 wow zoomIn">
				<table class="table table-responsive table-hover text-center">
					<thead>
						<tr>
							<td colspan="5" class="text-center pricing-title"><i
								class="fa fa-pagelines features-icon-small ">最新的计时</i></td>
						</tr>
					</thead>
					<tbody>
						<tr class="warning">
							<td>编号</td>
							<td>计时主题</td>
							<td>计时次数</td>
							<td>创建时间</td>
						</tr>
						
						<c:forEach items="${stopWatchInfoList}" var="watch"  varStatus="st">
							<tr>
								<td>${st.index+1}</td>
								<td title="${watch.timerEvent.title}">
									<a href="${ctx}/center/timer/result.html?tid=${watch.timerEvent.id}"> 
									<c:choose>
										<c:when test="${fn:length(watch.timerEvent.title) > 10}">
											${fn:substring(watch.timerEvent.title, 0, 10)}...
										</c:when>
										<c:otherwise>
											${watch.timerEvent.title}
										</c:otherwise>
									</c:choose>
									</a>
								</td>
								<td>${watch.countNumber}</td>
								<td>${watch.createTime}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div> 
        </div>
        <div class="row m-b-lg">
            <div class="col-lg-12 text-center">
                <div class="navy-line"></div>
                <h1>倒计时</h1>

                <p>
                	倒计时器是由单片机为核心的器件组成的一个倒计时系统，系统显示器是由7位数字型数码管组成，
                </p>
                <p>分别显示时间值的分、秒和0.1秒，它能够通过小键盘阵列设定倒计时时间。当倒计时到，有蜂鸣器发出警报</p>
            </div>
        </div>
       <div class="row">
			<div class="col-lg-12 wow zoomIn  text-center">
				<ul class="countdown">
					<li><span class="days">00</span>
						<p class="days_ref">days</p></li>
					<li class="seperator">.</li>
					<li><span class="hours">00</span>
						<p class="hours_ref">hours</p></li>
					<li class="seperator">:</li>
					<li><span class="minutes">00</span>
						<p class="minutes_ref">minutes</p></li>
					<li class="seperator">:</li>
					<li><span class="seconds">00</span>
						<p class="seconds_ref">seconds</p></li>
				</ul>
				<h1>
					<a class="btn btn-lg btn-primary m-l-n-lg " href="${ctx}/center/timer/countdown/classics.html" role="button">新建倒计时</a>
				</h1>
			</div>
		</div>
    </div>
</section>

<section id="contact" class="gray-section contact">
    <div class="container">
        <div class="row m-b-lg">
            <div class="col-lg-12 text-center">
                <div class="navy-line"></div>
                <h1>联系我们</h1>
                <p>我们是Track1</p>
            </div>
        </div>
        <div class="row m-b-lg">
            <div class="col-sm-4 wow fadeInLeft">
                <div class="team-member">
                    <img src="${ctx}/resource/v2/img/avatar5.jpg" class="img-responsive img-circle img-small" alt="">
                    <h4><span class="navy">皮带</span>●黄</h4>
                    <p>本系统总架构师，负责设计，优化，重构，维护以及拓展新功能等各种烦人事宜。是一个年轻的极客和彪悍的攻城略地师长，最主要的还是娃他爸。</p>
                    <ul class="list-inline social-icon">
                        <li><a href="#"><i class="fa fa-qq"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weibo"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weixin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="team-member wow zoomIn">
                    <img src="${ctx}/resource/v2/img/avatar9.jpg" class="img-responsive img-circle" alt="">
                    <h4><span class="navy">晶晶</span>●王</h4>
                    <p>网站代言人。Track1一级演员。最擅长反串，饰演各种娘们，而且塑造的角色性格显眼，特点突出。在手游王者荣耀最爱使用英雄亚瑟，没有最猥琐，只有更猥琐。</p>
                    <ul class="list-inline social-icon">
                         <li><a href="#"><i class="fa fa-qq"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weibo"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weixin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-4 wow fadeInRight">
                <div class="team-member">
                    <img src="${ctx}/resource/v2/img/avatar7.jpg" class="img-responsive img-circle img-small" alt="">
                    <h4><span class="navy">愣头青</span>●杨</h4>
                    <p>
                    工程媛，负责详细功能实现。灭绝师太第N代传人，性格火爆，嫉恶如仇，爱憎分明，对的是对的，错的也是对的。逆我者亡，顺我者昌。欢迎找虐。</p>
                    <ul class="list-inline social-icon">
                        <li><a href="#"><i class="fa fa-qq"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weibo"></i></a>
                        </li>
                        <li><a href="#"><i class="fa fa-weixin"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 text-center">
                <a href="mailto:test@email.com" class="btn btn-primary">发送邮件给我们</a>
                <p class="m-t-sm">
                    或者在社交平台上关注我们
                </p>
                <ul class="list-inline social-icon">
                    <li><a href="#"><i class="fa fa-qq"></i></a>
                    </li>
                    <li><a href="#"><i class="fa fa-weibo"></i></a>
                    </li>
                    <li><a href="#"><i class="fa fa-weixin"></i></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center m-t-lg m-b-lg">
                <p><strong>&copy; 2016 西安三星 SW </strong>All Rights Reserved By Samsung.</p>
            </div>
        </div>
    </div>
</section>

<a href="#inSlider" id="gotop" class="go2top" ><i class="fa fa-arrow-up "></i></a>
 
<input id="contextPath" type="hidden" value="${ctx}">


<!--依赖的js-->
<script src="${ctx}/resource/v2/js/jquery-2.1.1.js"></script>
<script src="${ctx}/resource/v2/js/pace.min.js"></script>
<script src="${ctx}/resource/v2/js/bootstrap.min.js"></script>
<script src="${ctx}/resource/v2/js/classie.js"></script>
<script src="${ctx}/resource/v2/js/cbpAnimatedHeader.js"></script>
<script src="${ctx}/resource/v2/js/wow.min.js"></script>
<script src="${ctx}/resource/v2/js/inspinia.js"></script>
<script src="${ctx}/resource/v2/js/timer.js"></script>
<script src="${ctx}/resource/v2/layer/layer.js"></script>
<script src="${ctx}/resource/v2/js/cfe.js"></script>
<script src="${ctx}/resource/v2/js/jquery.nicescroll.min.js"></script>	 
</body>
    
</html>